<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
  }

  .layout-logo {
    width: 60px;
    float: left;
    position: relative;
    left: 10px;
  }

  .layout-logo img {
    display: block;
    margin: auto;
    width: 100%;
  }

  .layout-nav {
    padding-right: 10px;
    margin: 0 auto;
    float: right;
  }

  .layout-breadcrumb {
    padding: 10px 15px 0;
    margin-left: 5%;
  }

  .layout-content {
    min-height: 200px;
    width: 90%;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
    margin: 15px auto;
  }

  .layout-copy {
    text-align: center;
    padding: 10px 0 30px;
    color: #9ea7b4;
  }
</style>
<template>
  <div>
    <div class="layout">
      <Menu mode="horizontal" theme="dark" active-name="1">
        <div class="layout-logo">
          <img src="/static/logo.png" alt="">
        </div>
        <div class="layout-nav">
          <Avatar size="large" v-if="userName != null" style="float:left;margin:10px">{{userName}}</Avatar>
          <Button shape="circle" icon="log-in" v-if="userName === null" @click="loginModal=true">登录</Button>
          <Button shape="circle" icon="log-in" v-if="userName != null" @click="logout">登出</Button>
          <Badge :count="cartNum" v-if="userName != null">
            <Button type="primary" shape="circle" icon="ios-cart" @click="gotoCart">购物车</Button>
          </Badge>
        </div>
      </Menu>

      <div class="layout-breadcrumb">
        <Breadcrumb>
          <BreadcrumbItem href="#">
            <Icon type="ios-home-outline"></Icon>
            首页
          </BreadcrumbItem>
          <BreadcrumbItem>
            <Icon type="pound"></Icon>
            <slot name="breadcrumb"></slot>
          </BreadcrumbItem>
        </Breadcrumb>
      </div>

      <div class="layout-content">
        <slot></slot>
      </div>
      <div class="layout-copy">
        1989-? &copy; Valentichu
      </div>
    </div>
    <Modal
      v-model="loginModal"
      title="登录">
      <Form ref="loginForm" :model="loginModel" :rules="rule">
        <FormItem prop="user">
          <iInput type="text" v-model="loginModel.user" placeholder="Username">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </iInput>
        </FormItem>
        <FormItem prop="password">
          <iInput type="password" v-model="loginModel.password" placeholder="Password">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
          </iInput>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" long :loading="logging" @click="login">登录</Button>
      </div>
    </Modal>
  </div>

</template>
<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        loginModal: false,
        logging: false,
        loginModel: {
          user: '',
          password: ''
        },
        rule: {
          user: [
            {required: true, message: '请填写用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请填写密码', trigger: 'blur'},
          ]
        }
      }
    },
    computed: {
      userName() {
        return this.$store.state.userName;
      },
      cartNum() {
        return this.$store.state.cartNum;
      }
    },
    methods: {
      login() {
        this.$refs['loginForm'].validate((valid) => {
          if (valid) {
            this.logging = true;
            axios.post("/auth/login", {
              userName: this.loginModel.user,
              userPassword: this.loginModel.password
            }).then((response) => {
              this.loginModel = {
                user: '',
                password: ''
              };
              this.logging = false;
              let res = response.data;
              console.log(res.code);
              if (res.code === 200) {
                this.loginModal = false;
                this.$store.commit("updateToken", res.data.token);
                this.$store.commit("updateUserName", res.data.userName);
                this.$Message.success('登录成功!');
              } else {
                this.$Message.error('登录失败!');
              }
            });
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      logout() {
        this.$store.commit("updateToken", null);
        this.$store.commit("updateUserName", null);
        /* this.$store.commit("updateCartNum", 0);*/
        this.$Message.success('用户登出');
      },
      gotoCart() {
        this.$router.push("cart");
      }
    }
  }
</script>
